<script setup>
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const tableData = ref([]);

onMounted(() => {
  queryDeptList();
});

const queryDeptList = async() => {
  await axios.get('/api/m1/7375908-7107946-default/depts').then(res => {
    if (res.data.code == 1) {
      tableData.value = res.data.data;
    }
  });
}
</script>

<template>
  <h1>部门管理</h1>

  <div class="container">
    <el-button type="primary" :icon="Plus">
      新增部门
    </el-button>
  </div>

  <div class="container">
    <el-table :data="tableData" border stripe height="300" style="inline-size: 100%">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="name" label="部门名称" width="250" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="300" align="center" />
      <el-table-column prop="updateTime" label="更新时间" width="300" align="center" />
      <el-table-column prop="operate" label="操作" fixed="right" width="200" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" :icon="Edit">编辑</el-button>
          <el-button type="danger" size="small" :icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<style scoped>
.container {
  margin: 10px 0px;
}
</style>
